<!-- 继承模板 -->
@extends('Admin/Layout/base')

<!-- 标题设置 -->
@section('title', '分类列表')

@section('style')
    <!-- 加载ueditor -->
    @include('vendor.ueditor.assets')
@endsection

{{-- 内容区域 --}}
@section('content')

<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">分类列表</div>
                </div>
                <div class="widget-body  am-fr">

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button" class="am-btn am-btn-default am-btn-success">
                                        <a href="{{ url('admin/category-add') }}" style="color: white;width:100%;height: 100%">
                                            <span class="am-icon-plus"></span>  
                                             新增
                                        </a>       
                                     </button>
                                    {{-- <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="am-form-group tpl-table-list-select">
                            <select data-am-selected="{btnSize: 'sm'}">
                                <option value="option1">所有类别</option>
                                <option value="option2">IT业界</option>
                                <option value="option3">数码产品</option>
                                <option value="option3">笔记本电脑</option>
                                <option value="option3">平板电脑</option>
                                <option value="option3">只能手机</option>
                                <option value="option3">超极本</option>
                            </select>
                        </div>
                    </div> --}}
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                        <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                            <input type="text" class="am-form-field " placeholder="搜索分类">
                            <span class="am-input-group-btn">
                                <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
                            </span>
                        </div>
                    </div>

                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r" style="text-align: center;">
                            <thead>
                                <tr>
                                    <th width="10%" style="text-align: center;">分类ID</th>
                                    <th width="20%" style="text-align: center;">分类名</th>
                                    <th width="30%" style="text-align: center;">分类描述</th>
                                    <th width="5%" style="text-align: center;">排序</th>
                                    <th width="10%" style="text-align: center;">状态</th>
                                    <th width="10%" style="text-align: center;">修改时间</th>
                                    <th width="15%" style="text-align: center;">操作</th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach($categoriesList as $v)
                                <tr class="gradeX">
                                    <td class="del-id">{{$v['id']}}</td>
                                    <td>{{$v['name']}}</td>
                                    <td>{{$v['description']}}</td>
                                    <td>{{$v['sort']}}</td>
                                    <td>
                                    @if($v['status'] == 0)
                                        <span class="am-badge">不生效</span>
                                    @elseif($v['status'] == 1)
                                        <span class="am-badge am-badge-success">生效</span>
                                    @endif
                                    </td>
                                    <td>{{$v['updated_at']}}</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="{{ url('admin/category-edit/') . '/' .$v['id'] }}">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del am-icon-close del-modal">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach                    
                                <!-- more data -->

                            </tbody>
                        </table>
                    </div>

                    <div class="am-u-lg-12 am-cf">

                        {{ $categoriesList->links() }}

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@section('footer-js')
   
<script type="text/javascript">

    // function c () {
    //     var r= new FileReader();

    //     f=document.getElementById('doc-form-file').files[0];

    //     r.readAsDataURL(f);

    //     r.onload=function  (e) {
    //         document.getElementById('show').src=this.result;
    //     };
    // }

</script>

{{-- 确认弹框的JS --}}
<script type="text/javascript">

    $('.del-modal').on('click', function () {

        var that = $(this);

        $('#my-confirm').modal({
            relatedTarget: this,
            onConfirm: function(options) {
                
                // console.log(this);
                //获取要删除的ID
                var id = $(this.relatedTarget).parents('td').siblings('.del-id').html();
                var that = $(this.relatedTarget);

                $.ajax({
                    type : 'post',
                    url : '{{ url('admin/category-del/') }}' + '/' + id,
                    data : '_token= {{ csrf_token() }} ',
                    dataType : 'json',
                    success : function (data) {
                        // console.log(data);
                        // console.log(data.msg);

                        if (data.code == 200) {
                            //删除成功
                            tipsDisplay('success', data.msg);
                            // console.log(that.parents('tr'));
                            that.parents('tr').remove();

                        } else if(data.code == 300 || data.code == 400) {
                            //删除失败
                            //
                            tipsDisplay('error', data.msg);
                        }
                    },

                    error : function (data) {

                    }

                });


            },
            // closeOnConfirm: false,
            onCancel: function() {
              
              
            }
        });

    });


</script>

@endsection